<script setup lang="ts">

</script>

<template>
  <div class="nav-bar shadow-md">
    <div class="h-full flex justify-between items-center px-4">
      <div class="">
        <img class="w-16" src="../assets/Essue.png" alt="logo">
      </div>
      <div>
        <ul class="nav-menu flex">
          <li class="nav-item nav-item--active">首页</li>
          <li class="nav-item">问答</li>
          <li class="nav-item">详情</li>
          <li class="nav-item">我的</li>
        </ul>
      </div>
      <div class="flex items-center gap-4">
        <img class="w-10 rounded-full" src="../assets/avatar.jpg" alt="touxiang">
        <span>xxx，早上好</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.nav-item {
  @apply px-4 cursor-pointer font-bold text-gray-50 opacity-60 duration-300;
}

.nav-item--active, .nav-item:hover {
  @apply opacity-100 scale-125;
}
</style>